<script setup>
import axios from "axios";
import { onMounted,computed } from "vue";
import {reactive, ref} from "vue";
import {useAuthStore} from "@/stores/authStore.js";
import {InfoFilled, Phone} from "@element-plus/icons-vue";
import {fetchContacts,
		updateFriendInfo,
		deleteFriendInfo,
		addFriendInfo,
		getGroup,
		addGroup,
		deleteGroup,
		batchAddGroups,
		importContacts} from "@/util/api";
import { ElMessage, ElDialog, ElMessageBox,ElLoading } from 'element-plus'
import { Minus,Edit } from '@element-plus/icons-vue'
import changeInfo from "@/components/changeInfo.vue";

const authStore = useAuthStore();

onMounted(async() => {
	fetchData(pageList.value.pageNO, pageList.value.pageSize,currentGroup.value);
	handleGetGroup();		
})

// 表单数据
const formData = reactive({
	userList:[]
})
// 选择状态
const state = reactive({
selectedIds: [], // 已选联系人ID列表
groupDialogVisible: false, // 分组选择弹窗
selectedGroup: null // 当前选中的分组
})
//新增分组判断
const isAddGroup = ref(false)
// 分页信息
const pageList = ref({
	pageNO: 1,
	pageSize: 10,
	totalCount: 0
});
// 分组信息
const groupList = ref([]);
//已选分组
const currentGroup = ref(null);
//是否创建
const isCreate = ref(false)
const isGroupCreate = ref(false)
const groupName = ref('');

// 搜索联系人
const search = ref('')
// 计算自定义序号
const order = (index) => {
	return index+pageList.value.pageSize*(pageList.value.pageNO-1)+1;
}



// 异步请求分页查询
const fetchData = async (pageNo, pageSize, groupId) => {
try {
	const res = await fetchContacts({
	pageNo,
	pageSize,
	groupId, 
	keyword: search.value.trim(), // 同时传递搜索词
	phoneNumber: authStore.token,
	userId: parseInt(authStore.loginUser)
	})
	console.log('联系人数据',res);
	
	formData.userList = res.data
	
	pageList.value.totalCount = res.total
	return res;
} catch (error) {
	ElMessage.error('数据加载失败')
}
}
// 退出
const logout = () =>{
	authStore.logout();
	window.location.reload();
}
// 修改信息对话框
const isChange = ref(false);
const editForm = reactive({
	id: null,
	name: '',
	phoneNumber: '',
	gender: '',
	birthDate: '',
	email: '',
	address: ''
});


//添加联系人
const handleCreate = () => {
isChange.value = true;
isCreate.value = true;
// 清空编辑表单数据
Object.assign(editForm, {
	id: null,
	name: '',
	phoneNumber: '',
	gender: '',
	birthDate: '',
	email: '',
	address: ''
});
};


// 修改联系人信息
const handleInfo = (row) => {
	isChange.value = true;	
	isCreate.value = false;
	Object.assign(editForm, {
		...row,
		phoneNumber: row.phoneNumber.trim(),
	});	
};

// 保存联系人信息
const handleSave = async (modifiedData) => {
	modifiedData = { ...modifiedData, userId: parseInt(authStore.loginUser) }	
	console.log('添加/修改请求体',modifiedData);
	
try {
	// 直接透传已验证数据
	const response = isCreate.value 
	? await addFriendInfo(modifiedData)
	: await updateFriendInfo(modifiedData)
	
	console.log('添加/修改响应',response);
	
	// if (response.code !== 200) {
	// throw new Error(response.message)
	// }
	if (response.success !== true) {
	throw new Error(response.errorMsg)
	}
	// 添加成功后强制刷新到第一页
	if (isCreate.value === true) {
	pageList.value.pageNO = 1
	}
	
	ElMessage.success(isCreate.value === true ? '添加成功' : '修改成功')
	fetchData(pageList.value.pageNO, pageList.value.pageSize, currentGroup.value)
	handleGetGroup()
} catch (error) {
	ElMessage.error(`${isCreate.value === true ? '添加' : '修改'}失败: ${error.message}`)
} finally {
	isChange.value = false
	isCreate.value = false
	
}
}

// 删除联系人
// const handleDelete = async(row) => {
// try {
// 	const userID = parseInt(authStore.loginUser);
// 	const url=`/delete?userID=${userID}`;
// 	const data = { phoneNumber:row.phoneNumber };
// 	const res =	await deleteFriendInfo(url,data);
// 	console.log('删除结果',res);
	
// 	ElMessage.success('删除成功');
// 	handleGetGroup()
// 	fetchData(pageList.value.pageNO, pageList.value.pageSize, currentGroup.value)
// } catch (error) {
// 	ElMessage.error('删除失败'); }
// }

		// 删除联系人
		const handleDelete = async(row) => {
		try {
			// await deleteFriendInfo(row.phoneNumber);
			// cat:2025/4/25修改点：补充传递 userId 和 phoneNumber（token）
			await deleteFriendInfo({ 
				phoneNumber: row.phoneNumber, 
				userId: parseInt(authStore.loginUser), 
				token: authStore.token 
        	}); 


			ElMessage.success('删除成功');
			handleGetGroup()
			fetchData(pageList.value.pageNO, pageList.value.pageSize, currentGroup.value)
		} catch (error) {
			ElMessage.error('删除失败'); }
		}




// 获取群组
const handleGetGroup = async() => {
try {
	const res = await getGroup(authStore.token);
	console.log('获取分组结果',res.data);
	
	groupList.value = res.data;
	
} catch (error) {
	ElMessage.error('获取群组失败'); }
}

// 新增群组
const handleNewGroup = async() => {
    try {
        // 校验分组名称
        if (!groupName.value.trim()) {
            ElMessage.error('群组名称不能为空');
            return;
        }
		if(groupList.value.some(group => group.groupName === groupName.value.trim()))
		{
			ElMessage.error('群组名称已存在');
			return;
		}
        // 构造请求体：包含分组名和当前用户ID（从 authStore 中获取）
        const params = {
            groupName: groupName.value.trim(), // 字段名必须与后端 UserGroup 实体的 groupName 一致
            userId: parseInt(authStore.loginUser) // 从登录状态中获取用户ID
        };

        // 调用添加群组接口
        const res = await addGroup(params);

        // 清空输入框
        cleanGroupName();

        // 处理响应
        if (res.code === 200) {
            ElMessage.success(res.data); // 后端将成功消息放在 data 中（Result.ok("消息")）
            await handleGetGroup(); // 刷新群组列表
        }
    } catch (error) {
        // 处理网络异常或后端返回的错误
        const errorMsg = error.response?.data?.errorMsg || '添加群组失败';
        ElMessage.error(`操作失败：${errorMsg}`);
    }
}
//清除groupName
const cleanGroupName = (done)=> {
	groupName.value = ''
	if (typeof done === 'function') {
		done(); // 来自before-close的关闭（自动更新isGroupCreate）
		console.log(isGroupCreate.value);
		
	} else {
		isGroupCreate.value = false; // 手动触发的关闭
	}
}


// 分页切换
const handlePageChange = (newPage) => {
pageList.value.pageNO = newPage;
fetchData(newPage, pageList.value.pageSize,currentGroup.value);
}


// 分组点击处理
const handleGroupClick = (groupId) => {
//currentGroup.value = groupName === '全部' ? null : groupName
currentGroup.value = groupId
handlePageChange(1)
}

// 修改点 1: 将 deleteGroup 函数的参数名从 groupName 改为 groupId，与后端接收的参数类型和实际要删除的信息匹配
const handleDeleteGroup = async (groupId) => {
    try {
        // 修改点 2: 调用 deleteGroup 函数时，传递正确的参数
        const res = await deleteGroup(groupId);
        if (res.code === 200) {
            // 从后端返回的数据中获取成功提示信息
            ElMessage.success(res.data); 

            // 以下注释代码可根据实际需求决定是否保留
            // if (currentGroup.value === groupId) {
            //     currentGroup.value = null;
            // }

            // 刷新分组和联系人列表
            handleGetGroup();
            fetchData(pageList.value.pageNO, pageList.value.pageSize, currentGroup.value);
        }
    } catch (error) {
        // 修改点 3: 从后端返回的数据中获取错误提示信息，如果没有则使用默认提示
        const errorMsg = error.response?.data?.errorMsg || '删除失败，请稍后重试';
        ElMessage.error('删除失败: ' + errorMsg);
    }
}


// 表格选择事件处理
const handleSelectionChange = (selection) => {
state.selectedIds = selection.map(item => item.id)
}

// 打开分组选择弹窗
const openGroupDialog = async () => {
try {
state.selectedGroup = null
await handleGetGroup() 
state.groupDialogVisible = true
} catch (error) {
ElMessage.error('获取分组失败')
}
}

// 添加到分组
const AddToGroup = async () => {
    if (!state.selectedGroup) {
        return ElMessage.warning('请选择目标分组');
    }

    try {
        state.selectedIds = Object.values(state.selectedIds);
        // 遍历每个联系人 ID 分别发送请求
        for (const contactId of state.selectedIds) {
            const newGroupId = parseInt(state.selectedGroup);	
            const res = await batchAddGroups({ contactId, newGroupId });
            if (res.code === 200) {
                ElMessage.success(res.data);
            } else {
                ElMessage.error(res.errorMsg);
            }
        }

        // 刷新数据和分组
        fetchData(pageList.value.pageNO, pageList.value.pageSize, currentGroup.value);
        handleGetGroup();
        state.selectedGroup = null;
        state.selectedIds = [];
        state.groupDialogVisible = false;
    } catch (error) {
        ElMessage.error('添加失败: ' + error.message);
    }
}

// 清空新增分组输入框
const clear = () => {
groupName.value = ''
isAddGroup.value = false
}
// 新增分组调用handleNewGroup方法
const handleAddNewGroup = async () => {
await handleNewGroup()
clear()
}

// 搜索联系人
const handleSearch = async () => {
if(search.value.trim() === '') {
	ElMessage.warning('请输入搜索关键词')
	handlePageChange(1)
	return
}
fetchData(1, pageList.value.pageSize, currentGroup.value).then((res)=>{		
	if(res.code === 200) {
		formData.userList = res.data
		if(res.data.length !== 0) {
			ElMessage.success('搜索成功')
		}
	}
})
}
// 导出联系人
const handleExport = async (format) => {
try {
let exportData = [];

// 判断是否无选中联系人
if (state.selectedIds.length === 0) {
try {
// 弹出确认对话框
await ElMessageBox.confirm(
  '当前未选择任何联系人，是否导出全部联系人数据？',
  '导出确认',
  {
	confirmButtonText: '导出全部',
	cancelButtonText: '取消',
	type: 'warning',
	closeOnClickModal: false
  }
);

// 显示加载状态
const loading = ElLoading.service({
  lock: true,
  text: '正在加载全量数据...',
  background: 'rgba(0, 0, 0, 0.7)'
});

try {
  // 获取全量数据（假设后端支持大pageSize）
  const res = await fetchData(1, 999999, null);
  exportData = res.data;
  console.log('全量数据',exportData);
  
  exportData = exportData.map(item => ({
  	...item,
  	usergroups: item.usergroups?.split(',').map(group => group.trim()) || []
  }))
  console.log('全量数据1',exportData);
  
} finally {
  loading.close();
}
} catch (cancelError) {
// 用户点击取消或关闭对话框
ElMessage.info('已取消导出操作');
return;
}
} else {
// 导出选中数据
exportData = formData.userList.filter(item => 
state.selectedIds.includes(item.id)
).map(item => ({
  	...item,
  	usergroups: item.usergroups?.split(',').map(group => group.trim()) || []
  }));
console.log('选中数据',exportData);

}

// 生成文件内容
let content, mimeType, extension;
if (format === 'csv') {
[content, mimeType, extension] = generateCSV(exportData);
} else {
[content, mimeType, extension] = generateVCF(exportData);
}

// 创建Blob对象
const blob = new Blob([content], { type: mimeType });

// 创建临时下载链接
const url = URL.createObjectURL(blob);

// 创建隐藏的a标签
const link = document.createElement('a');
link.style.display = 'none';

// 生成文件名
const timestamp = new Date()
.toISOString()
.replace(/[:T]/g, '-')
.substring(0, 19)
.replace(/-/g, '');
const filename = `contacts_${timestamp}.${extension}`;

// 配置下载属性
link.href = url;
link.download = filename;

// 插入DOM并触发点击
document.body.appendChild(link);
link.click();

// 清理资源
URL.revokeObjectURL(url);
document.body.removeChild(link);

ElMessage.success(`成功导出 ${exportData.length} 条数据`);
} catch (error) {
ElMessage.error(`导出失败：${error.message}`);
console.error('导出错误详情:', error);
}
};


// CSV生成函数（优化手机号和日期显示）
const generateCSV = (data) => {
const csvHeader = ['姓名', '手机号', '性别', '生日', '邮箱', '地址', '所属分组'];

const rows = data.map(item => [
// 姓名（保持原样）
`"${(item.name || '').replace(/"/g, '""')}"`,

// 手机号处理：添加前导制表符避免科学计数法
`\t${item.phoneNumber}`, 

// 性别（保持原样）
`"${item.gender}"`,

// 生日处理：统一日期格式
`\t${item.birthDate}`,

// 邮箱（保持原样）
`"${(item.email || '').replace(/"/g, '""')}"`,

// 地址处理：保留换行符
`"${(item.address || '').replace(/"/g, '""')}"`,

// 分组处理：保持分号分隔
`"${item.usergroups?.join(',') || ''}"`
].join(','));

const content = '\uFEFF' + [csvHeader.join(','), ...rows].join('\r\n');
return [content, 'text/csv; charset=utf-8', 'csv'];
};


// vCard生成函数
const generateVCF = (data) => {
const content = data.map(item => 
`BEGIN:VCARD
VERSION:3.0
FN:${item.name || ''}
GENDER:${item.gender || ''}
TEL;TYPE=CELL:${item.phoneNumber || ''}
EMAIL:${item.email || ''}
ADR:;;${item.address || ''}
BDAY:${item.birthDate || ''}
CATEGORIES:${item.usergroups?.join(',') || ''}
END:VCARD`).join('\n\n');

return [content, 'text/vcard; charset=utf-8', 'vcf'];
};


// // 导入
// const handleImport = async ({ file }) => {
// const loading = ElLoading.service({ 
// text: '正在解析文件...',
// background: 'rgba(0, 0, 0, 0.7)'
// })

// try {
// const reader = new FileReader()
// const content = await new Promise((resolve, reject) => {
// reader.onload = () => {
// console.log("文件内容（在 reader.onload 中）：", reader.result);
// resolve(reader.result)
// }

// reader.onerror = reject
// reader.readAsText(file)
// })

// // 发送文件名 + 内容
// const res = await importContacts({
// filename: file.name,
// data: content,
// userId: parseInt(authStore.loginUser)
// })
// console.log("导入结果：", res);

// if (res.code === 200) {
// ElMessage.success({
// message: `成功导入 ${res.data.successCount} 条数据`,
// duration: 3000
// })

// if (currentGroup.value) {
// await fetchData(pageList.value.pageNO, pageList.value.pageSize, currentGroup.value)
// } else {
// await fetchData(pageList.value.pageNO, pageList.value.pageSize, null)
// }

// await handleGetGroup()  
// }
// } catch (error) {
// ElMessage.error(`导入失败: ${error.message}`)
// } finally {
// loading.close()
// }
// }

// cat2025/5/16
// 导入
const handleImport = async ({ file }) => {
  const loading = ElLoading.service({
    text: '正在导入文件...',
    background: 'rgba(0, 0, 0, 0.7)'
  })

  try {
    // 创建 FormData 对象
    const formData = new FormData()
    formData.append('file', file) // 添加文件
    formData.append('userId', parseInt(authStore.loginUser)) // 添加用户ID
	console.log("文件内容（在 reader.onload 中）：", formData);
	
    // 直接发送 FormData，不需要手动读取文件内容
    const res = await importContacts(formData)
    console.log("导入结果：", res)

    if (res.code === 200) {
      ElMessage.success({
        message: `成功导入 ${res.data} 条数据`,
        duration: 3000
      })

      if (currentGroup.value) {
        await fetchData(pageList.value.pageNO, pageList.value.pageSize, currentGroup.value)
      } else {
        await fetchData(pageList.value.pageNO, pageList.value.pageSize, null)
      }

      await handleGetGroup()
    }
  } catch (error) {
    ElMessage.error(`导入失败: ${error.message}`)
  } finally {
    loading.close()
  }
}


// 文件校验
const beforeImport = (file) => {
const isUnder2M = file.size / 1024 / 1024 < 2
if (!isUnder2M) {
ElMessage.error('文件大小不能超过2MB!')
return false
}
return true
}
</script>

<template>
<div id="app">
	<div class="container">
		<div class="menu">
			<el-menu
					class="el-menu-demo"
					mode="horizontal"
					:ellipsis="false"
					
			>
				<el-menu-item>
					<el-icon style="color: deepskyblue"><Notebook /></el-icon>
					<el-text style="color: deepskyblue"><h1>个人通讯录管理系统</h1></el-text>
				</el-menu-item>

				<!-- <el-menu-item index="0">
					<el-icon><HomeFilled /></el-icon>
					<h2>首页</h2>
				</el-menu-item> -->
				<!-- <el-menu-item>
					<el-icon><UserFilled /></el-icon>
					<span id="username">王大锤</span>
				</el-menu-item> -->
				<div style="flex-grow:1"></div> 
				<el-menu-item >
					<el-popconfirm
							confirm-button-text="yes"
							cancel-button-text="no"
							:icon="InfoFilled"
							icon-color="#626AEF"
							title="确认要退出吗？"
							@confirm="logout">
						<template #reference>
							<el-button icon="SwitchButton" type="success">退出</el-button>
						</template>
					</el-popconfirm>
				</el-menu-item>
			</el-menu>
			<div class="action-container">
			<el-button 
			type="primary" 
			icon="Plus" 
			@click="handleCreate"
			style="margin-top: 15px;"
			>
			添加联系人
			</el-button>
			<el-button 
			:type="state.selectedIds.length > 0 ? 'success' : 'info'" 
			icon="Star" 	
			round
			:disabled="!state.selectedIds.length"
			@click="openGroupDialog"
			style="margin-top: 15px; margin-left: 15px;"
			>
			添加到分组...
			</el-button>
			<el-input
			title="支持手机号 /姓名 /姓名全拼或声母 搜索"
			placeholder="搜索联系人"
			prefix-icon="Search"
			style="margin-top:15px;margin-left:20px;width:200px;"
			v-model="search"
			@keyup.enter="handleSearch"
			>
			<template #append>
				<el-button 
				type="primary" 
				icon="Search"
				@click="handleSearch"
				/>
			</template>
			</el-input>
			<!-- 导入导出 -->
			<!-- 添加导入按钮 -->
			<el-upload
			:show-file-list="false"
			:before-upload="beforeImport"
			:http-request="handleImport"
			accept=".csv,.vcf"
			class="ml-15 mt-15"
			style="margin-top: 15px;margin-left: 15px;"
			>
			<el-button type="success" icon="Upload">导入</el-button>
			</el-upload>
			  <!-- 添加导出按钮 -->
			<el-dropdown @command="handleExport" trigger="click">
			<el-button type="primary" icon="Download" style="margin-top: 15px; margin-left: 10px;">
				导出
			</el-button>
			<template #dropdown>
				<el-dropdown-menu>
				<el-dropdown-item command="csv">导出为CSV</el-dropdown-item>
				<el-dropdown-item command="vcf">导出为vCard</el-dropdown-item>
				</el-dropdown-menu>
			</template>
			</el-dropdown>

		</div>
		<!-- 分组选择弹窗 -->
		<el-dialog 
			v-model="state.groupDialogVisible" 
			title="选择分组" 
			width="30%"
			style="position: relative;"
		>
			<el-select 
			v-model="state.selectedGroup" 
			placeholder="请选择分组"
			style="width: 100%"
			clearable
			>
			<el-option
				v-for="group in groupList"
				:key="group.id"
				:label="group.groupName"
				:value="group.id"
			/>
			<template #footer>
			<el-button 
			v-if="!isAddGroup"		
			@click="isAddGroup = true"
			icon="Plus"
			type="primary"
			>
			新建分组
			</el-button>
			<div v-else>
			<el-input 
			placeholder="请输入分组名称"
			v-model="groupName"
			@keyup.enter="handleAddNewGroup"
			clearable
			/>
			<el-button 
			type="primary"
			size="small"
			@click="handleAddNewGroup"
			style="margin-top: 10px;">
			确认
			</el-button>
			<el-button 
			size="small" 
			@click="clear"
			style="margin-top: 10px;">
			取消
			</el-button>
			</div>	
			</template>
			</el-select>
			<template #footer>
			<el-button @click="state.groupDialogVisible = false">取消</el-button>
			<el-button type="primary" @click="AddToGroup">确定</el-button>
			</template>
		</el-dialog>

	</div>
	<div class="content">
		<div class="form">
			<el-table :data="formData.userList" style="width: 100%" border @selection-change="handleSelectionChange">
				<el-table-column type="selection" />
				<el-table-column fixed label="序号" width="60" type="index" :index="order"/>
				<el-table-column prop="name" label="姓名" width="80" />
				<el-table-column prop="phoneNumber" label="手机号" width="150" />
				<el-table-column prop="gender" label="性别" width="80">
				<template #default="scope">
					{{ scope.row.gender === 1 ? '男' : '女' }}
				</template>
				</el-table-column>
				<el-table-column prop="birthDate" label="出生日期" width="140" />
				<el-table-column prop="email" label="电子邮件" width="180" />
				<el-table-column prop="address" label="联系地址" width="250" />
				<el-table-column prop="usergroups" label="所属分组" width="140" show-overflow-tooltip  class-name="group-cell"/>
				<el-table-column fixed="right" label="操作" min-width="200">
					<template #default="scope">
						<el-button link type="primary" size="small" @click="handleInfo(scope.row)" icon="Tools">
							修改
						</el-button>
						<el-button link type="warning" size="small" @click="handleDelete(scope.row)" icon="Delete">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div>
				<el-pagination
					background 
					layout="prev, pager, next"
					:total="pageList.totalCount"
					:current-page="pageList.pageNO"
					:page-size="pageList.pageSize"
					@current-change="handlePageChange"/>
			</div>
			
		</div>
		<div class="group">
			<div class="group_box">
				<div class="box_top">
					<div class="box_title">
						<h2>我的分组</h2>
					</div>
					<el-button 
					type="primary" 
					icon="CirclePlus" 
					style="margin: 10px"
					@click="isGroupCreate = true"
					>
					新建分组
					</el-button>
				<el-dialog 
				v-model="isGroupCreate"
				:title="'新建分组'"
				width="30%"
				style="text-align:left"
				:before-close=cleanGroupName>				
				<el-input placeholder="请输入分组名称" v-model="groupName" />
				<template #footer>
				<el-button @click="cleanGroupName()">取消</el-button>
				<el-button type="primary" @click="handleNewGroup()">确定</el-button>
				</template>
				</el-dialog> 
				</div>
				<div class="box_bottom">
					<div class="box_list">
						<ul>
							<li>
								<span>全部</span>
								<span>{{ pageList.totalCount }}</span>
							</li>
							<li v-for="item in groupList" :key="item.id" @click="handleGroupClick(item.id)">
								<span>{{ item.groupName }}</span> 
								<span>{{ item.membercount}}</span>
								<el-popconfirm
								v-if="item.groupName !== '全部'"
								title="确认删除该分组吗？"
								@confirm="handleDeleteGroup(item.id)"
								>
								<!-- 添加触发按钮 -->
								<template #reference>
								<el-button 
								type="danger" 
								:icon="Minus" 
								circle
								@click.stop	
								style=" margin-left: 8px;width: 14px;height: 14px;margin-bottom: 2px;"
								/>
								</template>
								</el-popconfirm>
							</li>
						</ul>
						
						</div>
				</div>
			</div>
		</div>
	</div>
	</div>
	
	<!-- 新建/修改信息对话框 -->
	<changeInfo v-model:visible="isChange" :isCreate="isCreate" :editForm="editForm" @save="handleSave"/>
</div>
</template>

<style scoped >
.container{
	position: relative;
	width: 80%;
	margin: 0 auto;
	text-align: center;
}
.menu {
position: relative;
padding-bottom: 5px;
border-bottom: 1px solid #ebeef5; /* 添加分割线 */
}
.el-menu--horizontal > .el-menu-item:nth-child(2) {
	margin-right: auto;
}
.content{
	display: flex;
	justify-content: space-between;
}
.form{
	width: 80%;
	margin-top: 20px;
}
.group{
	width: 20%;
}
.el-table .group-cell .cell {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.box_top{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.box_title{
	text-align: left;
}
.box_list {
	text-align: left;
}
.box_list>ul{
	list-style-type: none;
}
.box_list>ul>li{
	margin-top: 10px;
}
.box_list>ul>li:hover{
	cursor: pointer;
	color: deepskyblue;
	text-decoration: underline;
}
.box_list>ul>li>span:nth-child(1){
	margin-right: 10px;
}
.el-pagination {
	padding-top: 50px;
}
.action-container {
text-align: left;
margin-top: -8px; /* 微调垂直间距 */
display: flex; 
flex-direction: row;
}

</style>